.left-box{
    flex:0!important;
    min-width:340px;
    display: flex;
    flex-direction: column;
    margin-right: 10px;
    >.top-box{
        padding: 0 10px 10px 10px;
        .selected {
            display: flex;
            justify-content: space-around;
            margin: 10px 0;
            .select-box {
                position: relative;
                width: 150px;
                margin-right: 10px;
                select {
                    background-color: rgba(255, 255, 255, .1);

                }
            }
        }
        >ul{
            display: flex;
            flex-wrap: wrap;
            >li{
                width: 48px;
                margin: 5px;
                margin-left: 0;
                color: #fff;
                text-align: center;
                >img{
                    display: block;
                    width: 100%;
                }
                .icon-imgA{
                    display: none;
                }
                >P{
                    line-height: 32px;
                    font-size: 12px;
                }
                &.active{
                    color: #14C6CA;
                    .icon-imgA{
                        display: block;
                    }
                    .icon-img{
                        display: none;
                    }
                }
                &:last-child{
                    margin-right: 0;
                }
            }
        }
    }
    >.bottom-box{
        flex: 1;
        display: flex;
        flex-direction: column;
        .title-box{
        padding: 0 20px;
            a{
                font-size: 12px;
                color: #fff;
                &:hover{
                    color: #14C6CA;
                }
                &.active{
                    color: #14C6CA;
                }
            }
        }
        .category-box{
            padding: 10px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            >li{
                color: #fff;
                text-align: center;
                font-size: 12px;
                line-height: 32px;
                a{
                    display: block;
                    width: 48px;
                    height: 48px;
                    border-radius: 50%;
                    border: 1px solid #999999;
                    color: #999999;
                    line-height: 50px;
                    text-align: center;
                    font-size: 16px;
                }
                &.active{
                    color: #14C6CA;
                    >a{
                        background-color: #14C6CA;
                        border-color:#14C6CA;
                        color: #fff;
                    }
                }
            }
        }
        .category-info-box{
            padding: 0 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;;
            a{
                display: block;
                text-align: center;
                line-height: 26px;
                span{
                    display: block;
                    font-size: 12px;
                    color: #fff;
                }
            }
        }
        .info-list{
            padding: 0 20px;
            margin: 10px 0;
            flex: 1;
            overflow: auto;

            >li{
                display: flex;
                justify-content: space-between;
                align-items: center;
                background-color: rgba(20,198,202,0.2);
                border-radius: 2px;
                padding: 0 10px;
                height: 32px;
                margin-top: 5px;
                color: #fff;
            }
        }
    }
}
.center-box{
    display: flex;
    flex-direction: column;
    .map-box{
        position: relative;
        flex: 1;
        background-color: rgba(255,255,255,.2);
        #container{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
        }
        .info-box{
            position: absolute;
            right: 0;
            width: 320px;
            height: 100%;
            padding-bottom: 10px;
            background-color: rgba(255,255,255,.6);
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            z-index: 2;
            >.img-box{
                width: 100%;
                >img{
                    display: block;
                    width: 100%;
                }
            }
            .information-box{
                border-bottom: 1px solid #E6E6E6;

                >h3{
                    display: flex;
                    justify-content: space-between;
                    line-height: 46px;
                    padding: 0 20px;
                    border-bottom: 1px solid #E6E6E6;
                    >span{
                        font-size: 16px;
                        color: #14C6CA;
                    }
                    i{
                        font-size: 14px;
                        color: #E15D68;
                    }
                }
                >div{
                    padding:20px;
                    color: #666666;
                    font-size: 12px;
                    line-height: 26px;
                   
                }
            }
            .introduce-box {
                flex: 1;
                overflow: auto;
                padding: 20px;
                color: #666666;

                >h2{
                    font-size: 14px;
                    font-weight: bold;
                }
                >p{
                    line-height: 20px;
                    font-size: 12px;
                }
            }
        }
    }
}
